<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.detailState.visible"
            :title="api.detailState.title"
            destroy-on-close
            @close="api.onCloseDetail()"
    >
        <div class="font-weight-bold font-size-title-1 pb-3 text-black">基本信息</div>
        <el-descriptions :column="2" class="pl-6 pb-2">
            <el-descriptions-item label="公司名称">{{ api.detailState.form.company?.name }}</el-descriptions-item>
            <el-descriptions-item label="组织机构名称：">{{ api.detailState.form.org?.name }}</el-descriptions-item>
            <el-descriptions-item label="显示名称：">{{ api.detailState.form.displayName }}</el-descriptions-item>
            <el-descriptions-item label="真实姓名：">{{ api.detailState.form.realName }}</el-descriptions-item>
            <el-descriptions-item label="身份证号：">{{ api.detailState.form.idCard }}</el-descriptions-item>
            <el-descriptions-item label="性别：">{{ api.detailState.form.sex }}</el-descriptions-item>
            <el-descriptions-item label="编码：">{{ api.detailState.form.code }}</el-descriptions-item>
        </el-descriptions>

        <div class="font-weight-bold font-size-title-1 pb-3 text-black">账号信息</div>
        <table v-if="api.detailState.form.id" class="account-list fill-width">
            <tr v-for="authType in authTypeList.data" class="account-item">
                <td class="account-item-td">
                    <div class="d-flex align-center">
                        <el-icon v-if="findAccount(authType.value)" class="mr-2" color="#67c23a">
                            <SuccessFilled/>
                        </el-icon>
                        <el-icon v-if="!findAccount(authType.value)" class="mr-2" color="#e6a23c">
                            <WarningFilled/>
                        </el-icon>
                        <div> {{ authType.label }}</div>
                    </div>
                </td>

                <td class="account-item-td text-center">
                    <div v-if="findAccount(authType.value)">{{ findAccount(authType.value).authAccount }}</div>
                    <div v-if="!findAccount(authType.value)">未绑定{{ authType.label }}账号</div>
                </td>
                <td class="account-item-td text-center" style="width: 200px">
                </td>
            </tr>
        </table>
    </el-dialog>
</template>

<script lang="ts" setup>
import {UserApi} from "~/api/system/user";
import {CommonApi} from "~/api/system/common.api";
import {reactive, watch} from "vue";
import {SuccessFilled, WarningFilled} from "@element-plus/icons-vue";

interface Props {
    api: UserApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

const authTypeList = reactive({
    data: [],
});

const commonApi = new CommonApi();

function findAccount(value: string) {
    return (api.detailState.form.accountList as any[]).find(item => item.authType === value);
}

watch(() => api.detailState.visible, value => {
    if (value) {
      authTypeList.data = []
        commonApi.attachMore([{
            target: "AUTH_TYPE",
        }]).then(res => {
            if (res.ok && res.data) {
                res.data[`authTypeOptions`].forEach((item: any) => {
                    if (item.value !== "WECHAT" && item) {
                        authTypeList.data.push(item);
                    }
                });
            }
        });
    }
});

</script>

<style lang="scss" scoped>

.account-list {
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--el-border-color);
  border-bottom: none;

  .account-item {
    display: table-row;
    font-size: 14px;
    border-bottom: 1px solid var(--el-border-color);

    .account-item-td {
      padding: 16px !important;
      border-bottom: 1px solid var(--el-border-color);
    }
  }
}
</style>
